import 'package:flutter/material.dart';
import 'package:flutter_base_study/pageview/view/image_view.dart';

/**
 * 无线轮播图底部带小点
 * 利用取余实现
 */
class PageviewSwiperPage02 extends StatefulWidget {
  const PageviewSwiperPage02({super.key});

  @override
  State<PageviewSwiperPage02> createState() => _PageviewSwiperPage02State();
}

class _PageviewSwiperPage02State extends State<PageviewSwiperPage02> {
  List<Widget> list = [];

  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    list = [
      ImageViewPage(
          url:
              'https://img0.baidu.com/it/u=2881522803,771576777&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'),
      ImageViewPage(
          url:
              'https://img0.baidu.com/it/u=756784717,4222282671&fm=253&fmt=auto&app=138&f=JPEG?w=690&h=388'),
      ImageViewPage(
          url:
              'https://img0.baidu.com/it/u=3411979318,2994476395&fm=253&fmt=auto&app=138&f=JPG?w=681&h=418'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('无线轮播图，底部带小点'),
      ),
      body: Stack(
        children: [
          SizedBox(
            height: 200,
            child: PageView.builder(
              itemBuilder: (context, index) {
                return list[index % list.length];
              },
              onPageChanged: (index) {
                setState(() {
                  _currentIndex = index % list.length;
                });
              },
            ),
          ),
          Positioned(
              //设置left right =0 会占满整行
              left: 0,
              right: 0,
              bottom: 2,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(
                  list.length,
                  (index) => Container(
                    width: 10,
                    height: 10,
                    //上下左右距离
                    margin: EdgeInsets.all(5),
                    decoration: BoxDecoration(
                        color:
                            _currentIndex == index ? Colors.red : Colors.white,

                        ///----------------BoxDecoration画圆的第一种方式
                        // borderRadius: BorderRadius.circular
                        ///----------------BoxDecoration画圆的第二种方式
                        shape: BoxShape.circle),
                  ),
                ).toList(),
              ))
        ],
      ),
    );
  }
}
